<template>
  <div class="divadd">
    <el-form :model="form" label-width="120px">
      <el-form-item label="存证类型：" prop="evitype_id">
        <el-select
          v-model="form.evitype_id"
          clearable
          placeholder="Select"
          class="w-50 m-2"
        >
          <el-option
            v-for="item in exist"
            :key="item.value"
            :label="item.existingName"
            :value="item._id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="存证名称：">
        <el-input v-model="form.evititle" />
      </el-form-item>
      <el-form-item>
        <el-upload
          prop="wenjian"
          class="avatar-uploader"
          drag
          action="http://127.0.0.1:7011/fs/fstype"
          multiple
          :on-success="success"
          :show-file-list="true"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            将文件拖拽到此处或者 <em>点击上传</em>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="存证备注：">
        <el-input v-model="form.eviname" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(ruleFormRef)"
          >立即存证</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
    
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { useStore } from "vuex";
import axios from "axios";

import { ElTable, ElMessage, ElMessageBox, FormInstance } from "element-plus";
import {
  Delete,
  Download,
  Plus,
  ZoomIn,
  UploadFilled,
} from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
const ruleFormRef = ref<FormInstance>();
const router = useRouter();
const store = useStore();
const form = reactive({
  evitype_id: "",
  evititle: "",
  eviname: "",
  wenjian: "",
  user_id: "",
});
const onSubmit = async () => {
  form.user_id = store.state.userInfo.id;
  console.log(form,111111111111111111111);
  

  
  let data = await axios.post("/api/cunzheng/existingadd", form);
  console.log(data, "0723");
  if (data.data.code == 200) {
    ElMessage({
      message: "添加成功",
      type: "success",
    });
    router.push("/console/existing");
  }
};
const success = (uploadFile) => {
  console.log(uploadFile);
  form.wenjian = uploadFile.file;
};
// 存证类型渲染
const exist = ref([]);
onMounted(async () => {

    console.log(store.state.userInfo.id,11111111);
  let { data } = await axios.get("/api/cunzheng/existinglist");
  exist.value = data.data;
});
</script>
    
<style scoped>
.divadd {
  width: 97%;
  padding-top: 49px;
}
/* 头部card区域 */
.wert .el-container .el-main .title[data-v-82c28bb4] {
  width: 100%;
  height: 8%;
  background-color: var(--vt-c-white) !important;
  position: relative !important;
  top: 7px !important;
  /* left: 0%; */
  z-index: 10;
  box-shadow: 1px 0px 2px 1px #7f7f7f;
}
/* 存证管理span */
.wert .el-container .el-main .title .tetit[data-v-82c28bb4] {
  margin-left: 4% !important;
  width: 5%;
  height: 77%;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* 图片上传 */
.upload-demo {
  width: 400px;
  /* margin: 0 auto; */
}
</style>
